<script lang="ts">
import { ModelService, ModelViewerService } from '@manycore/custom-sdk';
import { getApplication } from '@/core/app';

const modelService = getApplication().getService(ModelService);
const getTopModels = async (pageNum?: number, pageSize?: number) => {
  const modelData = await modelService.getTopParamModels({ pageNum, pageSize });
  return modelData
};
/**
 * 模型切换选择框回调
 * @param id
 */
const handleModelChange = async (id: string) => {
  const modelViewerService = getApplication().getService(ModelViewerService);
  await modelViewerService.viewModelById(id);
};
</script>

<script setup lang="ts">
const props = defineProps<{ modelId: string }>()
const emits = defineEmits<{ (e: 'update:modelId', modelId: string): void }>()

const modelId = computed<string>({
  get() {
    return props.modelId
  },
  set(val) {
    emits('update:modelId', val)
  }
})
const modelList = ref<any[]>([])
getTopModels().then(modelData => {
  modelList.value = modelData.result
})

</script>

<template>
  <ElSelect v-model="modelId" @change="handleModelChange">
    <ElOption v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></ElOption>
  </ElSelect>
</template>
